<script setup lang="ts">
import { delayTimer } from '@v-c/utils'
import { AxiosError } from 'axios'
import { computed, nextTick, reactive, ref } from 'vue'
import { getCaptchaImageApi, loginApi, sendSmsCodeApi } from '~/api/common/login'
import { getQueryParam } from '~/utils/tools'
import type { LoginParams } from '~/api/common/login'
import pageBubble from '@/utils/page-bubble'

const message = useMessage()
const notification = useNotification()
const router = useRouter()
const token = useAuthorization()
const loginModel = reactive({
  userPhone: undefined,
  userPassword: undefined,
  mobile: undefined,
  code: undefined,
  captchaCode: undefined, // 图形验证码
  captchaId: undefined, // 图形验证码ID
  type: 'mobile',
  remember: true,
  agreeToTerms: false,
})

// 图形验证码状态
const captchaImage = ref<string>('')
const captchaLoading = ref(false)
const showPassword = ref(false)
const { t } = useI18nLocale()
const formRef = shallowRef()
const codeLoading = shallowRef(false)
const resetCounter = 60
const is_disabled = ref(false)
const isMobileFocused = ref(false)
const yanzhengmaFocused = ref(false)
const submitLoading = shallowRef(false)
const errorAlert = shallowRef(false)
const bubbleCanvas = ref<HTMLCanvasElement>()

// 计算属性：检查表单是否完全有效
const isFormValid = computed(() => {
  // 必须同意协议
  if (!loginModel.agreeToTerms) {
    return false
  }

  if (loginModel.type === 'account') {
    // 验证码登录：检查手机号、图形验证码和短信验证码
    const mobile = String(loginModel.mobile ?? '')
    const captchaCode = String(loginModel.captchaCode ?? '')
    const code = String(loginModel.code ?? '')
    return /^\d{11}$/.test(mobile) && /^.{5}$/.test(captchaCode) && /^\d{6}$/.test(code)
  }
  else {
    // 密码登录：检查手机号、图形验证码和密码
    const userPhone = String(loginModel.userPhone ?? '')
    const captchaCode = String(loginModel.captchaCode ?? '')
    const userPassword = String(loginModel.userPassword ?? '')
    return /^\d{11}$/.test(userPhone) && /^.{5}$/.test(captchaCode) && /^\d{8}$/.test(userPassword)
  }
})
const { counter, pause, reset, resume, isActive } = useInterval(1000, {
  controls: true,
  immediate: false,
  callback(count) {
    if (count) {
      if (count === resetCounter) {
        pause()
      }
    }
  },
})

async function getCode() {
  // 检查是否还在倒计时中
  if (isActive.value) {
    message.error({
      content: '请等待上次验证码发送完成',
    })
    return
  }
  is_disabled.value = true
  codeLoading.value = true
  try {
    // 验证手机号和图形验证码
    await formRef.value.validate(['mobile', 'captchaCode'])

    // 发送验证码，带上图形验证码参数
    await sendSmsCodeApi({
      phone: String(loginModel.mobile ?? ''),
      captcha_id: loginModel.captchaId,
      captcha_text: loginModel.captchaCode,
      ttl_seconds: 300,
    })

    // 发送成功后启动倒计时
    reset()
    resume()
    message.success('验证码已发送，请查收短信')
  }
  catch (error: any) {
    // 如果是表单验证错误，不显示错误信息（表单会自动显示）
    if (error && typeof error === 'object' && 'errorFields' in error) {
      // 表单验证错误，不处理
    }
    else {
      // request.ts 已经统一处理了错误消息显示，这里不需要再处理
      // 如果是图形验证码错误，自动刷新验证码
      if (error?.isBusinessError && (error.message?.includes('验证码') || error.message?.includes('已过期'))) {
        refreshCaptcha()
        loginModel.captchaCode = undefined
      }
    }
  }
  finally {
    codeLoading.value = false
    // 发送完成后重新启用按钮
    is_disabled.value = false
  }
}

function handleInputFocus() {
  isMobileFocused.value = true
}

function handleyanzhengmaInputFocus() {
  yanzhengmaFocused.value = true
}
function handleyanzhengmaInputoutFocus() {
  yanzhengmaFocused.value = false
}
function handleInputoutFocus() {
  isMobileFocused.value = false
}

// 获取图形验证码
async function loadCaptchaImage() {
  captchaLoading.value = true
  try {
    const response: any = await getCaptchaImageApi(loginModel.captchaId ? { captcha_id: loginModel.captchaId } : undefined)
    if (response && response.data) {
      captchaImage.value = `data:image/png;base64,${response.data.image_base64}`
      loginModel.captchaId = response.data.captcha_id
    }
  }
  catch (error: any) {
    // request.ts 已经统一处理了错误消息显示，这里不需要再处理
    // 如果是图形验证码错误，可以在这里添加特殊处理逻辑
  }
  finally {
    captchaLoading.value = false
  }
}

// 刷新图形验证码
function refreshCaptcha() {
  loadCaptchaImage()
}

// 处理验证码输入，只允许字母和数字，禁止中文
function handleCaptchaInput(e: Event) {
  const target = e.target as HTMLInputElement
  const value = target.value
  // 只保留字母和数字，过滤掉中文和其他特殊字符
  const filtered = value.replace(/[^a-zA-Z0-9]/g, '')
  if (filtered !== value) {
    loginModel.captchaCode = filtered
    // 强制更新输入框的值
    nextTick(() => {
      target.value = filtered
    })
  }
}

// 切换密码显示/隐藏
function togglePassword() {
  showPassword.value = !showPassword.value
}

async function submit() {
  submitLoading.value = true
  try {
    await formRef.value?.validate()
    let params: LoginParams

    if (loginModel.type === 'account') {
      // 验证码登录：校验手机号为11位数字与6位验证码
      const mobile = String(loginModel.mobile ?? '')
      const code = String(loginModel.code ?? '')
      if (!/^\d{11}$/.test(mobile))
        throw new Error('手机号需为11位数字')
      if (!/^\d{6}$/.test(code))
        throw new Error('验证码需为6位数字')

      params = {
        userPhone: mobile,
        verificationcode: code,
        captcha_id: loginModel.captchaId,
        captcha_text: loginModel.captchaCode,
      } as LoginParams
    }
    else {
      // 密码登录
      params = {
        userPhone: String(loginModel.userPhone ?? ''),
        userPassword: String(loginModel.userPassword ?? ''),
        captcha_id: loginModel.captchaId,
        captcha_text: loginModel.captchaCode,
      } as LoginParams
    }

    try {
      const response = await loginApi(params) as any
      // 新结构：{ code: 0, message: "OK", data: { userName, userCompany, userPhone, token } }
      if (response && response.code === 0) {
        token.value = response.data?.token || ''
        // 存储用户信息到localStorage
        localStorage.setItem('userInfo', JSON.stringify({
          userName: response.data?.userName,
          userCompany: response.data?.userCompany,
          userPhone: response.data?.userPhone,
        }))
        // 直接设置用户信息到store
        const userStore = useUserStore()
        userStore.setUserInfo({
          userName: response.data?.userName,
          userCompany: response.data?.userCompany,
          userPhone: response.data?.userPhone,
        })

        // 生成动态路由
        await userStore.generateDynamicRoutes()

        // 确保用户信息已正确设置
        if (!userStore.userInfo || Object.keys(userStore.userInfo).length === 0) {
          const localStorageUserInfo = localStorage.getItem('userInfo')
          if (localStorageUserInfo) {
            userStore.setUserInfo(JSON.parse(localStorageUserInfo))
          }
        }

        notification.success({
          message: '登录成功',
          description: `欢迎回来，${response.data?.userName}！`,
          duration: 3,
        })

        // 用localstage缓存用户信息
        localStorage.setItem('userName', response.data?.userName)
        localStorage.setItem('token', response.data?.token)

        // 获取当前是否存在重定向的答疑管理，如果存在就走重定向的地址
        let redirect = getQueryParam('redirect', '/resigration/list')
        console.log('登录成功，准备跳转到:', redirect)
        console.log('当前路由:', router.currentRoute.value)

        // 确保 redirect 路径包含 /registration_pc/ 前缀
        // 如果 redirect 是完整 URL（包含 http:// 或 https://），则保持不变
        if (!redirect.startsWith('http://') && !redirect.startsWith('https://')) {
          // 如果路径不是以 /registration_pc/ 开头，则添加前缀
          if (!redirect.startsWith('/registration_pc/')) {
            // 如果路径以 / 开头，去掉开头的 / 再添加前缀
            if (redirect.startsWith('/')) {
              redirect = `/registration_pc${redirect}`
            }
            else {
              redirect = `/registration_pc/${redirect}`
            }
          }
        }

        // 使用 nextTick 确保在下一个事件循环中执行跳转，避免路由守卫干扰
        await nextTick()

        // 使用 window.location.href 强制跳转，确保路由守卫不会干扰
        console.log('使用 window.location.href 跳转到:', redirect)
        window.location.href = redirect
      }
      else {
        // request.ts 已经统一处理了错误消息显示，这里不需要再处理
        submitLoading.value = false

        // 如果是图形验证码错误，自动刷新验证码
        if (response?.message?.includes('验证码') || response?.message?.includes('已过期')) {
          refreshCaptcha()
          loginModel.captchaCode = undefined
        }
      }
    }
    catch (e: any) {
      // request.ts 已经统一处理了错误消息显示，这里不需要再处理
      submitLoading.value = false

      // 如果是图形验证码错误，自动刷新验证码
      if (e?.isBusinessError && (e.message?.includes('验证码') || e.message?.includes('已过期'))) {
        refreshCaptcha()
        loginModel.captchaCode = undefined
      }
    }
  }
  catch (e) {
    if (e instanceof AxiosError) {
      errorAlert.value = true
    }
    else if (e instanceof Error) {
      message.error({
        content: e.message,
      })
    }

    submitLoading.value = false
  }
}
onMounted(async () => {
  refreshCaptcha()
  await delayTimer(300)
  pageBubble.init(unref(bubbleCanvas)!)

  // 检查是否已经同意协议
  const accepted = localStorage.getItem('userAgreementAccepted')
  if (accepted === 'true') {
    loginModel.agreeToTerms = true
  }

  // 加载图形验证码
  await loadCaptchaImage()
})

onBeforeUnmount(() => {
  pageBubble.removeListeners()
})
</script>

<template>
  <div
    class="login-container" style="background-color: #ffffff;
  "
  >
    <div
      h-screen w-screen absolute z-10
    >
      <!-- 展示银行背景信息样式 -->
      <div
        class="banner-container"
        style="
           width: 100%;
           height: 170px;
           background-color: rgb(57,162,252);
           display: flex;
           justify-content: center;
           align-items: center;
           margin: 0;
           padding: 0;
           overflow: hidden;
           "
      >
        <img
          src="https://f.hotgrid.cn/electricity-service/horizo_logo.png"
          alt="考试宣传横幅"
          class="banner-image"
          style="
              height: 188px;
              position: relative;
              box-shadow: 0 0 60px 25px rgba(255, 255, 255, 0.7); /* 外模糊边影 */
              box-shadow: 0 0 50px 30px rgba(57,162,252, 0.9); /* 最后一个值控制模糊透明度，0.6可调整 */
              width: auto;
              display: block;
              margin: 0;
              padding: 0;
              "
        >
      </div>
      <!-- 左右分栏 -->
      <div
        class="main-layout-container"
      >
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <center>
          <a-form
            ref="formRef"
            style="
                    position: relative;
                    top: -24px;
                    width:460px;
                    padding: 0 25px;
                    " :model="loginModel"
          >
            <a-tabs v-model:active-key="loginModel.type" class="login-tabs">
              <a-tab-pane key="mobile" :tab="t('pages.login.phoneLogin.tab')" />
              <a-tab-pane
                key="account" :tab="t('pages.login.accountLogin.tab')"
              />
            </a-tabs>
            <!-- 判断是否存在error -->
            <a-alert
              v-if="errorAlert && loginModel.type === 'account'"
              style="display: none;" mb-24px
              :message="t('pages.login.accountLogin.errorMessage')" type="error" show-icon
            />
            <a-alert
              v-if="errorAlert && loginModel.type === 'mobile'"
              style="display: none;" mb-24px
              :message="t('pages.login.phoneLogin.errorMessage')" type="error" show-icon
            />
            <span style="opacity:0">0</span>
            <template v-if="loginModel.type === 'mobile'">
              <a-form-item
                :validate-trigger="['blur']"
                name="userPhone"
                :rules="[
                  { required: true, message: t('pages.login.phoneNumber.required') },
                  {
                    pattern: /^\d{11}$/,
                    message: t('pages.login.phoneNumber.invalid'),
                    validateTrigger: 'blur',
                  },
                ]"
              >
                <div class="label-input-container">
                  <label
                    style="width: 80px;"
                    class="input-label"
                  >{{ t('pages.login.phoneNumber.label') }}</label>
                  <a-input
                    v-model:value="loginModel.userPhone"
                    class="custom-input-bg"
                    placeholder="请输入手机号"
                    style="flex: 1;"
                    :maxlength="11"
                    size="large"
                    autocomplete="off"
                    @press-enter="submit"
                    @focus="handleInputFocus"
                    @blur="handleInputoutFocus"
                  />
                </div>
              </a-form-item>

              <a-form-item
                name="userPassword"
                :validate-trigger=" ['blur']"
                :rules="[
                  { required: true, message: '请输入密码' },
                  {
                    pattern: /^\d{8}$/,
                    message: '密码格式错误',
                    validateTrigger: 'blur',
                  },
                ]"
              >
                <div class="label-input-container">
                  <label
                    style="width: 80px;"
                    class="input-label"
                  >密码</label>
                  <a-input
                    v-model:value="loginModel.userPassword"
                    :type="showPassword ? 'text' : 'password'"
                    class="password-input-wrapper"
                    placeholder="请输入8位数字密码"
                    :maxlength="8"
                    autocomplete="off"
                    @press-enter="submit"
                    @focus="handleyanzhengmaInputFocus"
                    @blur="handleyanzhengmaInputoutFocus"
                  >
                    <template #suffix>
                      <span class="password-toggle-eye" @click="togglePassword">
                        <span v-if="showPassword">

                          <img
                            src="@/assets/icons/eyes2.png"
                            style="width: 20px; height: 20px;"
                          >
                        </span>
                        <span v-else>
                          <img
                            src="@/assets/icons/eyes1.png"
                            style="width: 20px; height: 20px;"
                          >
                        </span>
                      </span>
                    </template>
                  </a-input>
                </div>
              </a-form-item>

              <!-- 图形验证码 -->
              <!-- 图形验证码 -->
              <!-- <a-form-item
                      name="captchaCode"
                      :validate-trigger="['blur']"
                      :rules="[
                        { required: true, message: '请输入验证码' },
                        {
                          pattern: /^.{5}$/,
                          message: '验证码格式有误',
                          validateTrigger: 'blur'
                        },
                      ]"
                    >
                      <div class="label-input-container">
                        <label
                        style="width: 80px;"
                        class="input-label">验证码</label>
                        <div style="display: flex; align-items: center; gap: 10px; flex: 1;">
                          <a-input
                            class="custom-input-bg"
                            v-model:value="loginModel.captchaCode"
                            placeholder="请输入验证码"
                            style="flex: 1;"
                            size="large"
                            :maxlength="5"
                            autocomplete="off"
                            @press-enter="submit"
                          />
                          <div
                            @click="refreshCaptcha"
                            style="
                              width: 120px;
                              height: 35px;
                              cursor: pointer;
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              border: 1px solid #d9d9d9;
                              border-radius: 3px;
                              background-color: #F9F9F9;
                              overflow: hidden;
                            "
                          >
                            <img
                              v-if="captchaImage"
                              :src="captchaImage"
                              alt="验证码"
                              style="width: 100%;
                              position: relative;
                              height: 100%; object-fit: cover;"
                            />
                            <span v-else-if="captchaLoading">加载中...</span>
                            <span v-else>点击刷新</span>
                          </div>
                        </div>
                      </div>
                    </a-form-item> -->
            </template>
            <template v-if="loginModel.type === 'account'">
              <a-form-item
                :validate-trigger="['blur']"
                name="mobile"
                :rules="[
                  { required: true, message: t('pages.login.phoneNumber.required') },
                  {
                    pattern: /^\d{11}$/,
                    message: t('pages.login.phoneNumber.invalid'),
                    validateTrigger: 'blur',
                  },
                ]"
              >
                <div class="label-input-container">
                  <label
                    style="width: 80px;"
                    class="input-label"
                  >手机号</label>
                  <a-input
                    v-model:value="loginModel.mobile"
                    class="custom-input-bg"
                    placeholder="请输入手机号"
                    style="background-color: #FFFFFF;
                        border: 1px solid gainsboro; border-radius: 5px; flex: 1;"
                    :maxlength="11"
                    size="large"
                    autocomplete="off"
                    @press-enter="submit"
                    @focus="handleInputFocus"
                    @blur="handleInputoutFocus"
                  />
                </div>
              </a-form-item>

              <!-- 图形验证码 -->
              <a-form-item
                name="captchaCode"
                :validate-trigger="['blur']"
                :rules="[
                  { required: true, message: '请输入验证码' },
                  {
                    pattern: /^.{5}$/,
                    message: '验证码格式有误',
                    validateTrigger: 'blur',
                  },
                ]"
              >
                <div class="label-input-container">
                  <label
                    style="width: 80px;"
                    class="input-label"
                  >验证码</label>
                  <div style="display: flex; align-items: center; gap: 10px; flex: 1;">
                    <a-input
                      v-model:value="loginModel.captchaCode"
                      class="custom-input-bg"
                      placeholder="请输入验证码"
                      style="flex: 1;"
                      size="large"
                      :maxlength="5"
                      autocomplete="off"
                      @press-enter="submit"
                      @input="handleCaptchaInput"
                    />
                    <div
                      style="
                              width: 120px;
                              height: 35px;
                              cursor: pointer;
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              border: 1px solid #d9d9d9;
                              border-radius: 3px;
                              background-color: #F9F9F9;
                              overflow: hidden;
                            "
                      @click="refreshCaptcha"
                    >
                      <img
                        v-if="captchaImage"
                        :src="captchaImage"
                        alt="验证码"
                        style="width: 100%;
                              position: relative;
                              height: 100%; object-fit: cover;"
                      >
                      <span v-else-if="captchaLoading">加载中...</span>
                      <span v-else>点击刷新</span>
                    </div>
                  </div>
                </div>
              </a-form-item>

              <a-form-item
                name="code"
                :validate-trigger=" ['blur']"
                :rules="[
                  { required: true, message: t('请输入短信验证码') },
                  {
                    pattern: /^\d{6}$/,
                    message: '短信验证码格式有误',
                    validateTrigger: 'blur',
                  },
                ]"
              >
                <div class="label-input-container">
                  <label
                    style="width: 80px;"
                    class="input-label"
                  >{{ t('短信验证码') }}</label>
                  <div class="input-with-button" style="flex: 1;">
                    <a-input
                      v-model:value="loginModel.code"
                      class="custom-input-bg"
                      placeholder="请输入短信验证码"
                      style="flex: 1;"
                      size="large"
                      :maxlength="6"
                      autocomplete="off"
                      @press-enter="submit"
                      @focus="handleyanzhengmaInputFocus"
                      @blur="handleyanzhengmaInputoutFocus"
                    />
                    <a
                      href="#"
                      class="code-button"
                      :class="{ disabled: is_disabled || isActive }"
                      :loading="codeLoading"
                      size="large"
                      :disabled="is_disabled || isActive"
                      @click="!is_disabled && !isActive ? getCode() : null"
                    >
                      <template v-if="!isActive">
                        {{ t('pages.login.phoneLogin.getVerificationCode') }}
                      </template>
                      <template v-else>
                        <span style="color: #BBBBBB;">
                          {{ t('pages.getCaptchaSecondText') }}
                          {{ resetCounter - counter }} 秒
                        </span>
                      </template>
                    </a>
                  </div>
                </div>
              </a-form-item>
            </template>

            <div class="mb-24px flex-between" style="margin-top: 20px;">
              <a
                v-if="loginModel.type === 'mobile'"
                style="color: grey; opacity: 0;"
              >
                {{ t('pages.login.forgotPassword') }}
              </a>
              <a
                v-else
                style="color: grey; opacity: 0;"
              >{{ t('pages.login.forgotyanzhengma') }}</a>

              <span
                style="opacity: 1;"
              >
                <a
                  href="/registration_pc/register"
                  class="switch-link"
                >
                  没有账号？去注册
                </a>
              </span>
            </div>
            <!-- 协议同意复选框 -->
            <div
              class="agreement-checkbox"
              style="
                    display:none;
                  position: relative;
                  top: -32px;
                  margin-bottom: 10px;"
            >
              <a-checkbox v-model:checked="loginModel.agreeToTerms">
                <span
                  style="color:rgb(102, 102, 102)"
                >
                  已阅读并同意使用协议和隐私政策
                </span>
                <!-- <a @click="() => router.push('/user-agreement')" style="color: #1976D2; text-decoration: underline;">
                        《用户服务协议》
                      </a> -->
              </a-checkbox>
            </div>

            <a-button
              type="primary"
              class="submit-button"
              :style="{
                backgroundColor: isFormValid ? '#376d9b' : '#3381d0',
                position: 'relative',
                color: isFormValid ? 'rgba(255, 255, 255, 1.0)' : 'rgba(255, 255, 255, 1)',
                top: '-15px',
                height: '58px',
                fontSize: '16px',
                fontWeight: '500',
                borderRadius: '3px',
                transition: 'all 0.3s ease',
                marginBottom: '20px',
              }"
              block :loading="submitLoading" size="large" @click="submit"
            >
              {{ t('pages.login.submit') }}
            </a-button>
          </a-form>
        </center>
        <!-- #这边的左侧的border silid 能不能顺直展示一半啊？ -->
        <br>
        <br>
        <br>
        <br>
        <br>

        <div class="footer">
          <div
            style="
          background-color:#929292;
          "
          >
            <center>
              <div
                style="
                width: 100%;
                height: 30px;
              background-color:#929292;
              position: absolute;
              bottom: 0;
              "
              >
                <span
                  style="
                font-size: 14px;
                position: relative;
                top: 5px;
                "
                >
                  Copyright  2025.中国贸易报 Rights Reserved
                </span>
              </div>
            </center>
          </div>
        </div>
      </div>

      <!-- 展示登录页面 -->
    </div>

    <div 
      class="fixed-footer"
      py-12px px-50px fixed bottom-0 z-11 w-screen 
      text-14px
    >
      <div style="text-align: center; color: #000000;">
        Copyright 2025.中国贸易促进委员会培训中心 Rights Reserved
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
/* 登录页 tabs 样式 */
.login-tabs {
  :deep(.ant-tabs-tab),
  :deep(.ant-tabs-tab-btn) {
    font-size: 16px !important;
    font-weight: 400 !important;
    font-family: '等线';
    color: #7c7c7c !important;
  }

  :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #4781D2 !important;
    font-family: '等线';
    font-weight: 500 !important;
  }

  :deep(.ant-tabs-ink-bar) {
    background-color: #4781D2 !important;
  }
}

/* 原生密码框样式 */
.password-input-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

/* 统一输入框样式 - 白色背景镂空效果 */
:deep(.ant-input),
.password-input {
  background-color: #FFFFFF !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

:deep(.ant-input:focus),
.password-input:focus {
  border-color: #40a9ff !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
}

/* 登录按钮样式调整 */
:deep(.ant-btn-primary) {
  height: 35px !important;
  font-size: 14px !important;
}

/* 统一输入框标签样式 - 横向布局 */
.label-input-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.input-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  min-width: 60px;
  flex-shrink: 0;
}

/* 移除浮动标签效果 */
.floating-label {
  display: none !important;
}

.password-input {
  width: 100%;
  height: 35px;
  padding: 8px 40px 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  background-color: #F9F9F9;
  outline: none;
  transition: all 0.3s ease;
}

.password-input:focus {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  padding: 4px;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

.password-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.eye-icon {
  font-size: 16px;
  user-select: none;
}

/* 密码输入框后缀样式 */
.password-toggle-eye {
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease;
  padding: 2px 4px;
  border-radius: 2px;
  border: none;
  user-select: none;
}

.password-toggle-eye:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 统一输入框高度 */
.password-input-wrapper {
  width: 100%;
}

.password-input-wrapper :deep(.ant-input) {
  height: 35px !important;
  padding-right: 40px !important;
  border: none !important; /* 去掉内层 input 的边框 */
  box-shadow: none !important;
}

.password-input-wrapper :deep(.ant-input-affix-wrapper) {
  background-color: #F9F9F9 !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px !important;
}

.password-input-wrapper :deep(.ant-input-affix-wrapper:hover) {
  border-color: #40a9ff !important;
}

.password-input-wrapper :deep(.ant-input-affix-wrapper-focused) {
  border-color: #40a9ff !important;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
}

/* 有误状态 */
.password-input-wrapper :deep(.ant-input-affix-wrapper-status-error) {
  border-color: #ff4d4f !important;
}

.password-input-wrapper :deep(.ant-input-affix-wrapper-status-error:focus) {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2) !important;
}

.code-input-container {
  position: relative;
  width: 100%;
}

.input-with-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #F9F9F9;
  border-radius: 3px;
  overflow: hidden; /* 确保圆角效果 */
}

.code-input {
  flex: 1;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding-right: 120px; /* 为按钮留出空间 */
}

.code-input:focus {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.code-button {
  position: absolute;
  right: 4px;
  height: 32px;
  border: none;
  box-shadow: none;
  background: transparent;
  color: #1976D2;
  font-size: 14px;
  padding: 5px 10px;
  font-family: 'Microsoft YaHei', '等线', sans-serif;
  white-space: nowrap;
  z-index: 2;
}

.code-button:hover:not(.disabled) {
  background: transparent !important;
  color: #1976D2 !important;
  cursor: pointer;
}

.code-button.disabled,
.code-button:disabled {
  color: #ccc !important;
  background: transparent !important;
  cursor: not-allowed !important;
}

.code-button.disabled:hover,
.code-button:disabled:hover {
  color: #ccc !important;
  background: transparent !important;
  cursor: not-allowed !important;
}

/* 浮动标签样式调整 */
.floating-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #c5c5c5;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  pointer-events: none;
  background-color: #F9F9F9;
  padding: 0 4px;
  z-index: 1;
}

.floating-label--active {
  top: 0;
  font-size: 12px;
  color: #376d9b;
  transform: translateY(0);
  background-color: #fff;
}

.floating-label-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.floating-label {
  font-weight: 400;
  -webkit-font-smoothing: auto; /* 关闭抗锯齿，获得粗糙感 */
  -moz-osx-font-smoothing: auto;
  text-shadow: 0.1px 0.1px 0.1px rgba(99, 99, 99, 0.1); /* 轻微阴影增强质感 */
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: #c5c5c5;
  font-size: 14px;
  font-family: '粗体';
  transition: all 0.2s ease;
  pointer-events: none;
  background-color: #F9F9F9;
  padding: 0 4px;
  z-index: 1;
}

.floating-label--active {
  top: 0;
  font-size: 12px;
  color: #959595;
  transform: translateY(0);
}

/* 自定义表单验证有误消息样式 - 与输入框左侧对齐 */
:deep(.ant-form-item-explain-error) {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-left: 92px !important; /* 60px label width + 12px gap */
  color: #ff4d4f !important; /* 红色有误文字 */
  font-size: 14px !important;
}

.floating-label-input {
  padding-top: 8px;
  height: 48px;
}

/* 调整输入框聚焦时的样式 */
.floating-label-input:focus {
  background-color: #fff;
  border: 1px solid #376d9b !important;
}

/* 确保标签在输入框聚焦时也显示 */
.floating-label-input:focus + .floating-label {
  top: 0;
  font-size: 12px;
  color: #8a8a8a;
  background-color: rgba(255, 255, 255, 0);
  transition: all 0.08s ease;
}

.login-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: scroll;
  background: var(--bg-color-container);
  padding-bottom: 100px; /* 为footer留出空间，防止按钮被遮挡 */
}

.login-lang {
  height: 40px;
  line-height: 44px;
}

.login-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.ant-pro-form-login-container {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  height: 100%;
  padding: 32px 0;
  overflow: auto;
  background: inherit
}

.ant-pro-form-login-header a {
  text-decoration: none
}

.ant-pro-form-login-title {
  color: var(--text-color);
  font-weight: 600;
  font-size: 33px;
  line-height: 1;
}

.ant-pro-form-login-logo {
  width: 44px;
  height: 44px;
  margin-right: 16px;
  vertical-align: top
}

.ant-pro-form-login-desc {
  color: var(--text-color-1);
  font-size: 14px;
  margin-left: 16px
}

.ant-pro-form-login-main-right {
  .ant-tabs-nav-list {
    margin: 0 auto;
    font-size: 16px;
  }

  .ant-pro-form-login-other {
    line-height: 22px;
    text-align: center
  }

  /* 自定义选项卡颜色为#1976D2 */
  /* 使用更直接的选择器提高优先级 */
  &:deep(.ant-tabs-tab .ant-tabs-tab-btn) {
    color: #6d6d6d !important;
    font-weight: 00 !important; /* 加粗字体 */
    font-size: 17px;
    font-family: '等线';
  }

  &:deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #181818 !important;
    font-weight: 400 !important; /* 加粗字体 */

  }

  &:deep(.ant-tabs-ink-bar) {
    background-color: #256bd4 !important;
  }

  &:deep(.ant-tabs-tab:not(.ant-tabs-tab-active):hover .ant-tabs-tab-btn) {
    color: #000000 !important;
  }

}

.ant-pro-form-login-main{
  box-shadow: var(--c-shadow);
}

.icon {
  margin-left: 8px;
  color: var(--text-color-2);
  font-size: 24px;
  vertical-align: middle;
  cursor: pointer;
  transition: color .3s;

  &:hover {
    color: var(--pro-ant-color-primary);
  }
}

/* 自定义输入框背景色 */
  .custom-input-bg {
    &:deep(.ant-input) {
      background-color: #F9F9F9 !important;
    }

    &:deep(.ant-input-group-wrapper) {
      background-color: #F9F9F9 !important;
    }

    /* 确保placeholder区域也被覆盖 */
    &:deep(.ant-input::placeholder) {
      background-color: #F9F9F9 !important;
      opacity: 0.8;
      color: #999999 !important; /* 调浅placeholder文字颜色 */
      font-weight: normal !important; /* 正常字体粗细 */
    }

    /* 兼容不同浏览器的placeholder样式 */
    &:deep(.ant-input:-ms-input-placeholder) {
      color: #999999 !important; /* 调浅placeholder文字颜色 */
      font-weight: normal !important; /* 正常字体粗细 */
    }

    &:deep(.ant-input::-ms-input-placeholder) {
      color: #999999 !important; /* 调浅placeholder文字颜色 */
      font-weight: normal !important; /* 正常字体粗细 */
    }

  /* 针对有清除按钮的情况调整内边距 */
  &:has(.ant-input-clear-icon) {
    &:deep(.ant-input) {
      padding-right: 24px !important;
    }
  }
}
.login-media(@width:100%) {
  .ant-pro-form-login-main{
    width: @width;
  }
  .ant-pro-form-login-main-left{
    display: none;
  }
  .ant-pro-form-login-main-right{
    width: 100%;
  }
  .ant-pro-form-login-desc{
    display: none;
  }
}
@media (min-width : 992px) {
  .ant-pro-form-login-main-left{
    width: 700px;
  }
}
@media(min-width:768px) and (max-width:991px){
  .ant-pro-login-divider{
    display: none;
  }
  .login-media(400px)
}
/* 响应式布局：当宽度小于1600px时，隐藏右侧栏，左侧居中 */
@media screen and (max-width: 3599px) {
  .main-layout-container {
    overflow-y: scroll;
    height: 80vh;
  }

  .login-card {
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
  }

  .right-panel {
    display: none !important;
  }
}

@media screen and (max-width:767px) {
  .login-media(350px);

  .ant-pro-login-divider{
    display: none;
  }

  // 移动端：外层容器宽度自适应，减少留白
  .ant-pro-form-login-main {
    width: 98% !important; // 从95%增加到98%
  }

  // 移动端：登录卡片宽度自适应
  .box-border {
    width: 100% !important;
    min-height: auto !important;
  }

  // 移动端：隐藏左侧图片
  .login-left-image {
    display: none !important;
  }

  // 右侧表单区域在移动端全宽
  .ant-pro-form-login-main-right {
    width: 100% !important;
    padding: 20px 10px !important; // 减少左右内边距从15px到10px
  }

  // 表单宽度调整
  .ant-form {
    width: 100% !important;
    max-width: 100% !important;
  }

  // 调整输入框容器宽度
  .floating-label-container {
    width: 100% !important;
  }

  // 表单内容左右内边距调整并移除left偏移
  .ant-form {
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 0 !important; // 移除80px的偏移
  }

  // 确保所有输入框在移动端为100%宽度
  .custom-input-bg,
  .floating-label-input {
    width: 100% !important;
    max-width: 100% !important;

    &:deep(.ant-input) {
      width: 100% !important;
      max-width: 100% !important;
    }
  }

  // 输入框样式容器
  .floating-label-container {
    width: 100% !important;
  }

  .login-card {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 40px !important;
  }
}

/* 解决按钮被遮挡问题 - 确保有足够的底部空间 */
.submit-button {
  margin-bottom: 20px !important;
}

/* 确保表单区域有足够的底部padding */
.login-card {
  padding-bottom: 40px !important;
}

/* 登录/注册切换链接样式 */
.switch-link {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #4781D2 !important;
  text-decoration: underline !important;
  text-underline-position: auto !important;
  transition: color 0.3s ease !important;
}

.switch-link:hover {
  color: #256bd4 !important;
}

/* Footer 样式 - 确保不穿透 */
.fixed-footer {
  background-color: #929292 !important;
  text-align: center;
}
</style>
